$(function () {
    //需求1
    // 初始化文章分类列表 封装函数
    let layer = layui.layer
    initArtCateList()
    function initArtCateList() {
        axios({
            method: 'get',
            url: '/my/article/cates',
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            let ary = []
            let index = 0
            res.data.data.forEach(ele => {
                index++
                ary.push(`
                        <tr>
                        <td>${index}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                            <button data-id='${ele.Id}' type="button" class="btn_edit layui-btn layui-btn-xs">编辑</button>
                            <button data-id='${ele.Id}' type="button" class="btn_del layui-btn layui-btn-xs layui-btn-danger">删除</button>

                        </td>
                    </tr>
                `)
                let str = ary.join()
                $('tbody').empty().html(str)
            })
        })
    }

    //需求2
    // 点击添加按钮 显示对话框 事件委托
    let indexAdd = null;
    $('#btnAdd').on('click', function () {
        indexAdd = layer.open({
            title: '添加文章分类',
            area: ['500px', '300px'],
            content: `
            <form class="layui-form" action="" id='formAdd'>
                    <!-- 1 -->
                    <div class="layui-form-item">
                      <label class="layui-form-label">分类名称</label>
                      <div class="layui-input-block">
                        <input type="text" name="name" required                    lay-verify="required" placeholder="请输入分类名称"              autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <!-- 2 -->
                     <div class="layui-form-item">
                      <label class="layui-form-label">分类别名</label>
                      <div class="layui-input-block">
                        <input type="text" name="alias" required                    lay-verify="required" placeholder="请输入分类别名"              autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <!-- 3 -->
                     <div class="layui-form-item">
                        <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
            </form>
            `
        });
    })

    //需求3 添加文章分类
    $('body').on('submit', '#formAdd', function (e) {
        e.preventDefault()
        let data = $(this).serialize()
        axios({
            method: 'post',
            url: '/my/article/addcates',
            data: data,
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            // 提示成功
            layer.msg('添加文章列表成功')
            // 关闭对话框
            layer.close(indexAdd)
            // 重新渲染页面
            initArtCateList()
        })
    })

    //需求4 点击编辑按钮 弹出对话框 事件委托
    let indexEdit = null;
    $('tbody').on('click', '.btn_edit', function () {
        indexEdit = layer.open({
            title: '添加文章分类',
            area: ['500px', '300px'],
            content: `
            <form class="layui-form" id='formEdit' lay-filter="formEdit">
                    <!-- 0 隐藏域 用来装发送修改请求的ajax的Id参数-->
                    <input type='hidden' name='Id'>
                    <!-- 1 -->
                    <div class="layui-form-item">
                      <label class="layui-form-label">分类名称</label>
                      <div class="layui-input-block">
                        <input type="text" name="name" required                    lay-verify="required" placeholder="请输入分类名称"              autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <!-- 2 -->
                     <div class="layui-form-item">
                      <label class="layui-form-label">分类别名</label>
                      <div class="layui-input-block">
                        <input type="text" name="alias" required                    lay-verify="required" placeholder="请输入分类别名"              autocomplete="off" class="layui-input">
                      </div>
                    </div>
                    <!-- 3 -->
                     <div class="layui-form-item">
                        <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
            </form>
            `
        });

        //需求5 展示当前的文字分类信息
        // 发送ajax请求
        let id = $(this).attr('data-id')
        // alert(id)
        axios({
            method: 'get',
            url: '/my/article/cates/' + id,
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            // 给表单赋值
            layui.form.val('formEdit', res.data.data)
        })
    })

    //需求6 修改文章分类 事件委托
    $('body').on('submit', '#formEdit', function (e) {
        e.preventDefault()
        let data = $(this).serialize()
        axios({
            method: 'post',
            url: '/my/article/updatecate',
            data: data,
        }).then(function (res) {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            // 提示成功
            layer.msg('修改文章列表成功')
            // 关闭对话框
            layer.close(indexEdit)
            // 重新渲染页面
            initArtCateList()
        })
    })

    //需求7 删除文章分类
    $('tbody').on('click', '.btn_del', function () {
        let id = $(this).attr('data-id')
        layer.confirm('确认是否删除?', { icon: 3, title: '提示' }, function (index) {
            //do something
            axios({
                method: 'get',
                url: '/my/article/deletecate/' + id,
            }).then(function (res) {
                // console.log(res.data);
                if (res.data.status != 0) {
                    return layer.msg(res.data.message)
                }
                layer.msg('删除成功')
                // 重新渲染页面
                initArtCateList()
            })
            layer.close(index);
        });
    })
});